% Created 2022-04-07 周四 13:53
% Intended LaTeX compiler: xelatex
\documentclass[a4paper]{article}
                 \usepackage{graphicx}
                 \usepackage{xcolor}
                 \usepackage{xeCJK}
                 \usepackage{fixltx2e}
                 \usepackage{longtable}
                 \usepackage{float}        
                 \usepackage{tikz}         
                 \usepackage{wrapfig}      
                 \usepackage{latexsym,amssymb,amsmath}
                 \usepackage{textcomp}
                 \usepackage{bicaption}
                 \usepackage{listings}     
                \usepackage{marvosym}     
                \usepackage{textcomp}     
                \usepackage{latexsym}     
                \usepackage{natbib}
                \usepackage{indentfirst}
		\usepackage{hyperref}
                \usepackage{geometry}
                \usepackage{minted}
                \setCJKmainfont{宋体}
                \setlength{\parindent}{2em}
                \usepackage{color}
                \usepackage{fancyhdr}
\pagestyle{fancy}
\fancyhead[R]{\footnotesize{《Android 物联网应用程序开发》 广西职业师范学院实验教学指导书}}
\geometry{a4paper,left=2.5cm,right=2.5cm,top=2cm,bottom=2cm}
\setCJKmainfont{仿宋}
\setCJKsansfont{Microsoft YaHei}
\setCJKmonofont{Microsoft YaHei}

\usemintedstyle{emacs}
    \setminted{%
        autogobble,% automatically remove the spaces to the left of the code
        linenos=true,% show line numbers
        fontsize=\small,% smaller font size
        % escapeinside=@@,% insert latex code between @ and @
        frame=lines,% frame styles: none or lines
        % frame=none,
        numbers=none,% show line numbers on: left, right, both or none
        mathescape=true,% insert math code
	breaklines=true,
    }%
    \setmintedinline{%
        fontsize=\smallsize,
    }%
\date{\today}
\title{实验三：初级组件练习}
\hypersetup{
 pdfauthor={},
 pdftitle={实验三：初级组件练习},
 pdfkeywords={},
 pdfsubject={},
 pdfcreator={Emacs 27.1 (Org mode 9.3.8)}, 
 pdflang={English}}
\begin{document}

\maketitle
\tableofcontents

\newpage

\section{实验目的}
\label{sec:org7f2f029}
\begin{itemize}
\item 掌握 Andoird 初级组件的使用
\end{itemize}
\section{实验设备和器件}
\label{sec:orgf57824d}
\begin{itemize}
\item PC
\item 内存要求 8G 以上
\end{itemize}
\section{实验内容}
\label{sec:org3d0249b}
\subsection{实验一:checkbox}
\label{sec:orgff1259c}
    按照下图的需求，使用checkbox设计一个“喜欢的食物”个人统计信息:
当选中其中一个选项，底下列表新增对应事物，当取消掉其中一个选项，
底下列表去掉该食物
\begin{center}
\includegraphics[width=0.4\textwidth]{./img/screenshot_20220407_135248.png}
\end{center} 

\subsection{实验二:ImageView + Switch}
\label{sec:org15feb91}
\begin{itemize}
\item 按照下图的需求，请你使用 switch 组件设计一个开关，可以控制图片的切
\end{itemize}
换。
\begin{center}
\includegraphics[width=0.9\textwidth]{./img/screenshot_20220406_202325.png}
\end{center} 
\begin{itemize}
\item 使用以下图片素材自行截图制作
\end{itemize}
\begin{center}
\includegraphics[width=0.7\textwidth]{./img/screenshot_20220406_202942.png}
\end{center} 
\subsection{实验三:ImageView 切换效果}
\label{sec:orga593f99}
\begin{itemize}
\item 步骤1:在布局中创建两个按钮，两个按钮下方放置ImageView组件,参考布局
代码如下：
\end{itemize}
\begin{minted}[]{xml}
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
  <Button
      android:id="@+id/prev"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="上一张"/>
  <Button
      android:id="@+id/next"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="下一张"/>
</LinearLayout>
<!-- 显示图片 -->
<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitCenter"
    android:src="@mipmap/zhihe_1"/>
\end{minted}
\begin{itemize}
\item 步骤2:声明相关组件，加入图像资源数组，图片资源自备, 参考代码如下：
\end{itemize}
\begin{minted}[]{java}
private Button prevButton, nextButton;
private ImageView imageView;
//初始化图片资源
private int[] images = {
	R.mipmap.zhihe_1,R.mipmap.zhihe_2,
	R.mipmap.zhihe_3,R.mipmap.zhihe_4
};
private int currentIndex = 1; // 保存当前图片的索引
\end{minted}
\begin{itemize}
\item 步骤3:初始化组件引用
\end{itemize}
\begin{minted}[]{java}
prevButton = (Button) findViewById(R.id.prev);
nextButton = (Button) findViewById(R.id.next);
imageView = (ImageView) findViewById(R.id.image);
\end{minted}
\begin{itemize}
\item 步骤4:两个按钮实现图片的切换
\end{itemize}
\begin{minted}[]{java}
prevButton.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	    imageView.setImageResource(images[currentIndex]);
	    // 当前图片为第一张图片时，则把索引变为最后一张
	    if(currentIndex <= 0){
		currentIndex = images.length - 1;
	    }else{
		currentIndex--;
	    }
	}
    });
nextButton.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	    imageView.setImageResource(images[currentIndex]);
	    // 当前图片为最后一张图片时，则把索引变为第一张
	    if(currentIndex >= images.length-1){
		currentIndex = 0;
	    }else {
		currentIndex ++ ;
	    }
	}
    });
\end{minted}
\begin{itemize}
\item 最终效果显示:
\begin{center}
\includegraphics[width=0.3\textwidth]{./img/screenshot_20220406_203131.png}
\end{center}
\end{itemize}

\subsection{实验四:progressBar}
\label{sec:org3fda736}
使用ProgressBar组件，配合Handler/Message/Thread线程类在界面上循环显示进度值
\begin{enumerate}
\item 创建progress\_activity.xml，放置TextView组件和ProgressBar组件
\begin{minted}[]{xml}
<TextView
    android:id="@+id/textView12"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="进度条:" />

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="100"
    android:progress="90"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
\end{minted}
\item 在MainActivity.java创建Handler类和线程类，线程内部进行累计计算，
每隔1S将进度值+1，然后通过Message类把进度值封装,发送到前台UI。
\begin{minted}[]{java}
//声明
private ProgressBar pb;
private int progress = 0;
private int max = 100;
Handler handler;
//....
//设置基本的值
  pb = (ProgressBar)findViewById(R.id.progressBar);
  pb.setMax(max);
  pb.setProgress(progress);


//create thread 
    Thread t = new Thread(){
     @Override
     public void run() {
	 super.run();
	 while (progress < 100)
	 {
	     progress += 1;
	     Message msg = new Message();
	     msg.arg1 = progress;
	     handler.sendMessage(msg);
	     try {
		 Thread.sleep(1000);
	     } catch (InterruptedException e) {
		 e.printStackTrace();
	     }
	 }

     }
 };
  t.start();
\end{minted}

\item 前台UI,handleMessage方法接收处理消息，在前端UI设置进度值
\end{enumerate}
\begin{verbatim}
//onCreate methods : create handle
 handler = new Handler(){
     @Override
     public void handleMessage(Message msg) {
	 super.handleMessage(msg);
	 int k = msg.arg1;
	 pb.setProgress(k);
	 tv.setText("进度值:"+k+"%");
     }
 };
\end{verbatim}
实训效果:
\begin{center}
\includegraphics[width=0.3\textwidth]{./img/screenshot_20220406_203612.png}
\end{center} 
参考关键代码:
后台线程:
\begin{minted}[]{java}
new Thread(){
    @Override
    public void run() {
	super.run();
	while (true)
	{
	    try {
		Thread.sleep(1000);
		if(progress > 100)
		    progress = 0;
		progress++;
		Message msg = new Message();
		msg.arg1 = progress;
		handler.sendMessage(msg);
	    } catch (InterruptedException e) {
		e.printStackTrace();
	    }
	}
    }
}.start();

\end{minted}
handlerMessage方法:
\begin{minted}[]{java}
handler = new Handler(){
    @Override
    public void handleMessage(Message msg) {
	super.handleMessage(msg);
	int k = msg.arg1;
	pb.setProgress(k);
	tv.setText("进度值:"+k+"%");
    }
};

\end{minted}
\end{document}